<%@ page language="java" import="java.util.*,com.beans.*,com.dao.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";            
%>
<!DOCTYPE html>  
<html>
  <head>
     <base href="<%=basePath%>"> 

    <title>商品管理</title>
	<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
	<script type="text/javascript">
		$(function(){
			$("#ch_checkall").click(function(){
				if($("#ch_checkall").attr("checked")=="checked"){
					$("input[name=ck_id]").attr("checked","checked");
				}else{
					$("input[name=ck_id]").removeAttr("checked");
				}		
			});
			
			
			$("table tr").mouseover(function(){
				$(this).css("background","#D3EAEF");
				$(this).siblings().css("background","white");
			});
		});
		
		//初始化下拉框
		$(function(){
			$("#bigCateId").change(function(){
				if(this.value=="0"){
					$("#smallCateId").html("<option value='0'>小分类</option>");
					return;
				}
				$.ajax({
					url:"${pageContext.request.contextPath}/CateServlet.do",
					type:"POST",
					async:false,
					dataType:"json",
					data:{bigcateid:this.value,flag:"listsmallcate"},
					success:function(cateList){
						$("#smallCateId").empty();
						$.each(cateList,function(key,cateInfo){
							var optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
							$("#smallCateId").append(optionStr);
						});
						
						
					}
				});
			
			});
			
			//如果是页面回发,要让列表框选中原来选中的值(在ie6中还有 一些问题,要进行处理)
			$("#bigCateId").val("${param.bigCateId}");
			$("#bigCateId").change();
			$("#smallCateId").val("${param.smallCateId}");

		});
		
		//根据已有元素,取得它的坐标	
		function getElemPos(obj) {
			var pos = {
				"top" : 0,
				"left" : 0
			};
			if (obj.offsetParent) {
				while (obj.offsetParent) {
					pos.top += obj.offsetTop;
					pos.left += obj.offsetLeft;
					obj = obj.offsetParent;
				}
			} else if (obj.x) {
				pos.left += obj.x;
			} else if (obj.x) {
				pos.top += obj.y;
			}
			
			return {
				x : pos.left,
				y : pos.top
			};

		}		
		function showDetails(item, goodsId, desc) {
			var position = getElemPos(item);
			$("#div_goods_detail").show();
			$("#div_goods_detail").css("left", position.x - 150).css("top",
					position.y);

			$("#goods_picture").attr("src","GoodsServlet.do?flag=showPicture&goodsId="+goodsId);
			$("#div_imgdesc").html("<center>" + desc + "</center>");
		}
		

		//隐藏商品图片div
		function hideDetails() {
			$("#div_goods_detail").hide();
		}
	</script>

	<script>
		function subForm(pageIndex)
		{
		    //pageIndex 不传入,表示,是点击"转到"按钮的时候触发的
		    if(pageIndex){
		    	$("#pageIndex").val(pageIndex);
		    	document.form1.submit();
		    }
		    else{
		    	document.form1.submit();
		    }	
		}
		
		//点击上方的删除按钮,进行多项删除
		function delMore(pageIndex){
			var list=document.getElementsByName("ck_id");
			var idSql="";
			var flag=false;
			
			for(var i=0;i<list.length;i++){	
				if(list[i].checked==true){
					idSql=idSql+list[i].value+",";				
					flag=true;
					
				}
			}
			
			if(flag==true){
				window.location.href="GoodsServlet.do?flag=delMore&idSql="+idSql;
				
			}else{
				alert("至少选中一个才可以删除");
				return false;
			}
		}
		
		//点击删除按钮,删除单条商品
		function del(goodsId){
			if(confirm('确定要删除该商品吗')){
			 	window.location.href="GoodsServlet.do?flag=del&goodsId="+goodsId;
			}
		}
	</script>
	<link rel="stylesheet" type="text/css" href="css/maintable.css" ></link>
    <style>
    	.div_tools{
    		width:99.5%; 
			height:28px;
			background:#D3EAEF;
			margin:0px auto;
			margin-top:5px;
			margin-bottom:5px;
			font-size:12px;
			position:relative;	 
			
    	}
    	
    	.div_tools select{
    		height:22px;
    		font-size:12px;
			margin-top:3px;
    	}
    	
    	#btnsubmit{
    		width:40px;
    		height:20px;
    		font-size:12px;
    	}
    	
    	/*显示图片*/
    	#div_goods_detail{
    		display:none;
    		position: absolute;
    	}
    </style>

    </head>
    
	<body>

		<div class ="div_title">
				<div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品列表</span></div>
				<div class="div_titleoper">
				<input type="checkbox"  /> 全选
				    <a href="goods/goods_add.jsp"> <img src="images/add.gif"/>添加 </a> 
					<a href="javascript:delMore()"><img src="images/del.gif"/>删除</a> 
				</div>
		 </div>
		 <form action="GoodsServlet.do?flag=manage" method="post" name="form1">
		 <div class ="div_tools">
		 	 &nbsp; &nbsp; &nbsp;
		 	 
		 	 <%
					List<CateInfo> cateList=new CateDao().getCateList(0); 
					request.setAttribute("cateList", cateList);
				 %>
				 
			  <select name="bigCateId" id="bigCateId">
					<option value="0">大分类</option>
					<c:forEach var="cate" items="${cateList}">
						<option value="${cate.id }" >${cate.cateName }</option>
					</c:forEach>
	 		 </select>
		 	&nbsp;
		 	<select name="smallCateId" id="smallCateId">	
		 		<option value="0">小分类</option>  
		 	</select>
		 	   &nbsp;  &nbsp;  &nbsp;商品名称: <input type="text" name="goodsName" value="${param.goodsName }"></input>
		 	<input id="btnsubmit" type="submit"  value="查询" />
		 </div>
		
		 <input type="hidden" name="flag" value="delAdmins" />
		 <table class="main_table" >
		       <tr>
		 				<th><input type="checkbox" id="ch_checkall" /></th>	
		 				<th>名称</th> 	
		 				<th>单位</th>  
		 				<th>单价</th> 
		 				<th>大分类</th> 
		 				<th>小分类</th> 
		 			<!-- 	<th>说明</th>  -->
		 				<th>操作</th>
		 		</tr>
		 		<c:forEach var="goods" items="${goodsList}">
		 		<tr>
		 				<td>
		 					<input type="checkbox" name="ck_id" value="${goods.id}" /> 
		 				</td>
		 				<td>${goods.goodsName }</td>	
		 		
		 				<td>${goods.unit }</td>	
		 				
		 				<td>${goods.price }</td>	
		 				<td>${goods.bigCateName }</td>
		 				<td>${goods.smallCateName }</td>
		 		
		 				
		 				<td>
			 				<a href="javascript:void(0)" 
			 					onmouseover="showDetails(this,'${goods.id }','${goods.des }')"
			 					onmouseout="hideDetails()"
			 				>查看</a> |  
	
			 				<a href="goods/goods_edit.jsp?goodsId=${goods.id }">修改</a> |  
			 							
			 			    <a href="javascript:del(${goods.id })">删除</a> 
	
		 				</td>
		 		</tr>
		   		 </c:forEach>
		 	
		</table>
		
		
		
		<div class="div_page" >
			  <div class="div_page_left">    共有 <label>${pageInfo.rowCount }</label> 条记录，当前第 <label>${pageInfo.pageIndex }</label> 页，共 <label>${pageInfo.pageCount }</label> 页	</div>
			
				
			  <div class="div_page_right" > 	 
			  	<c:choose>
			  		<c:when test="${pageInfo.hasPre }" >
		  			    <button onclick="subForm(1)" >首页</button>
		  	 			<button onclick="subForm(${pageInfo.pageIndex-1})">上一页</button>	
			  		</c:when>
			  		
			  		<c:otherwise>
			  			 首页
		  	 			 上一页
			  		</c:otherwise>	
			  	</c:choose>
			  	
			 	<c:choose>
			  		<c:when test="${pageInfo.hasNext}" >
		  			    <button onclick="subForm(${pageInfo.pageIndex+1})">下一页</button>
		  	 			<button onclick="subForm(${pageInfo.pageCount})">尾页</button>	
			  		</c:when>
			  		
			  		<c:otherwise>
			  			下一页 
		  	 		         尾页
			  		</c:otherwise>	
			  	</c:choose>
	
			  	  <button onclick="subForm()">转到</button>
			  	 <input type="text" name="pageIndex" id="pageIndex" value="${pageInfo.pageIndex }" /> 页
			  	
			   </div>
				
		</div>
		
		<div id="div_goods_detail">
			<img id="goods_picture" width="140" height="190" />
			<div id="div_imgdesc"></div>
		</div>
		
		</form>
		  <script type="text/javascript">
		  	 var msg='${msg}';
		  	 if(msg!=''){
		  	 	alert(msg);
		  	 }
		  </script>
  </body>
</html>
